import React, { memo, useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux'
import { Carousel } from 'antd';

import { getBannerListAction } from '../store/actionCreators'

function TopBanner() {

  const { bannerList } = useSelector(state => ({
    // 获取immutable对象的数据的两种方式
    // topBanners: state.get('recommend').get('topBanners')
    bannerList: state.getIn(["recommend", "bannerList"])
  }), shallowEqual) // shallowEqual 浅层比较

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getBannerListAction())
  }, [dispatch])
  return (
    <div className="banner-list">
      <Carousel autoplay >
        {
          bannerList &&  bannerList.map((item) => {
            return (
              <div className="banner" key={item.imageUrl}>
                <img className="image" src={item.imageUrl} alt = {item.typeTitle}></img>
              </div>
            )
          })
        }
      </Carousel>
    </div>
  )
}

export default memo(TopBanner);

